<template>
  <div id="CapitalList">
    <van-tabs border sticky color="#0cf" title-active-color="#0cf" v-model="active">
      <van-tab title="风险投资">
        <vj-list :load-more="onRiskLoad.bind(this)">
          <template #default="{item}">
            <section @click="$pushRoute({path:'capital-info',query:{customId:item.id}})" class="c-capital">
              <van-image fit="cover" class="c-capital__img" :src="item.picture"/>
              <div class="c-capital__wrap">
                <h3 class="c-capital__name">{{ item.title }}</h3>
                <section class="c-capital__item">
                  <van-icon class="c-capital__icon" name="coupon-o"/>
                  <span class="vertical-middle">{{ item.mininvest }}/{{ item.maxinvest }}万</span></section>
                <section class="c-capital__item">
                  <van-icon class="c-capital__icon" name="fire-o"/>
                  <span class="vertical-middle">{{ addrFmt(item) }}{{item.capaddress}}</span></section>
              </div>
            </section>
          </template>
        </vj-list>
      </van-tab>
      <van-tab title="银行融资">
        <vj-list :load-more="onLoad.bind(this)">
          <template #default="{item}">
            <section @click="$pushRoute({path:'capital-info',query:{customId:item.id}})" class="c-capital">
              <van-image fit="cover" class="c-capital__img" :src="item.picture"/>
              <div class="c-capital__wrap">
                <h3 class="c-capital__name">{{ item.title }}</h3>
                <section class="c-capital__item">
                  <van-icon class="c-capital__icon" name="coupon-o"/>
                  <span class="vertical-middle">{{ item.mininvest }}/{{ item.maxinvest }}万</span></section>
                <section class="c-capital__item">
                  <van-icon class="c-capital__icon" name="fire-o"/>
                  <span class="vertical-middle">{{ addrFmt(item) }}{{item.capaddress}}</span></section>
              </div>
            </section>
          </template>
        </vj-list>
        <!--                <van-image class="a-wait" :src="require('@/assets/img/wait.png')"/>-->
      </van-tab>
    </van-tabs>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import VjList from "@/components/vj-list.vue";
import {asyncSleep} from "vijay-util";
import {requestByGet} from "@/utils/request";

@Component({
  components: {VjList}
})
export default class CapitalList extends Vue implements ComponentOptions<Vue> {
  name = "CapitalList";
  active = 0;

  async onRiskLoad(pageNo, pageSize) {
    const {records} = await requestByGet(`/qqc/qqcCapital/list`, {pageNo, pageSize, type: this.active + 1});
    return records;
  }

  async onLoad(pageNo, pageSize) {
    const {records} = await requestByGet(`/qqc/qqcCapital/list`, {pageNo, pageSize, type: this.active + 1});
    return records;
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#CapitalList {
  .a-wait {
    display: block;
    width: 90%;
    margin: 130px auto 0;
  }

  .c-capital {
    @include alignCenter;

    &__img {
      width: 62px;
      height: 72px;
      flex-shrink: 0;
      margin-right: 20px;
    }

    &__wrap {
      line-height: 1.5;
      flex: 1;
      overflow: hidden;
    }

    &__name {
      font-size: 18px;
      color: $strong-clr;
    }

    &__icon {
      vertical-align: middle;
      margin-right: 4px;
      font-size: 14px;
    }

    &__item {
      font-size: 12px;
      color: $p-color;
      @include t-overflow(3);
    }
  }
}
</style>
